import { createContext, useState } from 'react'
import { Row, Col } from 'antd'

import PC from '../reposive/pc'
import Mobile from '../reposive/mobile'

import ParentCategory from './parent-category'
import Cards from './cards/index'
import ChildCategory from './child-category-my'
import Filter from './filter'
import ShowFilterContent from './show-filter-content'
import HCenter from '@/components/utils/h-center'

import '@/styles/common.css'

export const Context = createContext()

const MainContent = () => {
  const [flagShowFilterContent, setFlagShowFilterContent] = useState(true)

  return (
    <>
      <div style={{ padding: '2% 0' }}>
        <Context.Provider
          value={{ flagShowFilterContent, setFlagShowFilterContent }}
        >
          {/* 这里是选择区域 */}
          <Row justify="space-around" align="middle">
            <Col
              xs={{ span: 12 }}
              sm={{ span: 12 }}
              md={{ span: 12 }}
              lg={{ span: 2 }}
            >
              <HCenter>
                <ParentCategory />
              </HCenter>
            </Col>
            <Col
              xs={{ span: 12, push: 0 }}
              sm={{ span: 12, push: 0 }}
              md={{ span: 12, push: 0 }}
              lg={{ span: 2, push: 20 }}
            >
              <HCenter>
                <Filter />
              </HCenter>
            </Col>
            <Col
              xs={{ span: 24, pull: 0 }}
              sm={{ span: 24, pull: 0 }}
              md={{ span: 24, pull: 0 }}
              lg={{ span: 20, pull: 2 }}
            >
              <HCenter>
                <ChildCategory />
              </HCenter>
            </Col>
          </Row>

          {/* 这里是filter的展示区域 */}
          <div hidden={flagShowFilterContent}>
            {/* <p>这里是filter的内容展示区域</p> */}
            <ShowFilterContent />
            {/* <ShowFilterContent hidden={flagShowFilterContent} /> */}
          </div>

          {/* 这里是图片区域 */}
          <Cards />

          {/* <Mobile>mobile</Mobile> */}
        </Context.Provider>
      </div>
    </>
  )
}

export default MainContent
